<template>
  <div class="lineChart">
    <h1>散点图</h1>
    <div ref="chartRef" style="width: 660px; height: 350px"></div>
  </div>
</template>

<script lang="ts" setup>
import { echarts } from '@/utils/echarts'
const chartRef = ref<HTMLDivElement | null>(null)
let myChart: echarts.ECharts | null = null

const option = {
  dataset: [
    {
      source: [
        [1, 4862.4],
        [2, 5294.7],
        [3, 5934.5],
        [4, 7171.0],
        [5, 8964.4],
        [6, 10202.2],
        [7, 11962.5],
        [8, 14928.3],
        [9, 16909.2],
        [10, 18547.9],
        [11, 21617.8],
        [12, 26638.1],
        [13, 34634.4],
        [14, 46759.4],
        [15, 58478.1],
        [16, 67884.6],
        [17, 74462.6],
        [18, 79395.7],
      ],
    },
    {
      transform: {
        type: 'ecStat:regression',
        config: {
          method: 'exponential',
          // 'end' by default
          // formulaOn: 'start'
        },
      },
    },
  ],
  title: {
    text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
    subtext: 'By ecStat.regression',
    sublink: 'https://github.com/ecomfe/echarts-stat',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
  },
  xAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  series: [
    {
      name: 'scatter',
      type: 'scatter',
      datasetIndex: 0,
    },
    {
      name: 'line',
      type: 'line',
      smooth: true,
      datasetIndex: 1,
      symbolSize: 0.1,
      symbol: 'circle',
      label: { show: true, fontSize: 16 },
      labelLayout: { dx: -20 },
      encode: { label: 2, tooltip: 1 },
    },
  ],
}

onMounted(() => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    myChart.setOption(option)
    // 监听窗口变化自适应
    window.addEventListener('resize', resizeChart)
  }
})
function resizeChart() {
  if (myChart) {
    myChart.resize()
  }
}

// 在组件卸载前执行的操作
onBeforeUnmount(() => {
  // 如果echarts实例存在，则销毁实例
  if (myChart) {
    myChart.dispose()
    myChart = null // 清空 myChart 变量
  }
  chartRef.value = null // 清空 chartRef 变量 myChart.dispose()
  window.removeEventListener('resize', resizeChart)
})
</script>

<style scoped lang="scss"></style>
